<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/9/27
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

</head>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            用户管理
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab" ">楼层管理</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">房间管理
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">预定管理</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">营业管理</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <div>
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet">
                        <ul class="projectAllul"></ul>
                        <div style="text-align:center;">
                            <ul id="pageButton"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div  class="row clearfix">
            <div class="col-md-12 column" >
                <table class="table table-hover table-striped"  data-toggle="table" id="table">
                </table>
            </div>
        </div>
    </div>

     <div class="tab-pane fade" id="ios">
        <div  class="row clearfix">
            <div class="col-md-12 column" id="Inquire1">
                <table class="table table-hover table-striped"  data-toggle="table" id="dataTable1">
                </table>
            </div>
        </div>

    </div>


<div class="tab-pane fade" id="jmeter">
    <h>订单</h>
    <div  class="row clearfix">
        <div class="col-md-12 column" >
            <table class="table table-hover table-striped"  data-toggle="table" id="dataTable2">
            </table>
        </div>
    </div>
    <h>预定</h>
    <div  class="row clearfix">
        <div class="col-md-12 column" >
            <table class="table table-hover table-striped"  data-toggle="table" id="dataTable3">
            </table>
        </div>
    </div>
</div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>

</div>
<script type="text/javascript">
    $(function () {
        init();
    })
    function init() {
        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
            url:"/usre/infor",
            methods:"GET",
            pagination: false,   //启动分页
            striped: true,    //设置为 true 会有隔行变色效果
            cache: false,
            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sidePagination:'server',
            pageSize: 20,//初始页记录数
            sortable: true,    //排序
            pageList: [10,20], //记录数可选列表
            smartDisplay: false,    //程序自动判断显示分页信息
            columns:[
                {
                    title: '用户名',
                    field: 'name',
                    align:'center',
                },
                {
                    title: '密码',
                    field: 'password',
                    align: 'center',
                },
                {
                    title: '真实姓名',
                    field: 'persohaldetails.realname',
                    align: 'center',
                },
                {
                    title: '身份证号',
                    field: 'persohaldetails.identification',
                    align: 'center',
                },
                {
                    title: '手机号码',
                    field: 'cellphonenumber',
                    align: 'center',
                },
                {
                    title: '地址',
                    field: 'persohaldetails.location',
                    align: 'center',
                },{
                    title: '删除',
                    align: 'renter',
                    formatter:function (index, row, x) {
                        var html='<button type="button"  onclick="a2( '+row.name+')">删除</button>';
                        return html;
                    }

                },
                {
                    title: '增加',
                    align: 'renter',
                    formatter:function (index, row, x) {
                        var html='<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">增加</button>';
                        return html;
                    }

                }

            ]
        })
    }
</script>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    增加个人信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    用户名:  <input  type="text" id="name"><br>
                    密码:  <input  type="password" id="password"><br>
                    手机号码:  <input  type="text" id="cellphone"><br>
                    真实姓名:  <input  type="text" id="realname"><br>
                    身份号码: <input  type="text" id="identification"><br>
                    地点 <input  type="text" id="location"><br>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="al()">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
function al() {
 var name=$.trim($("#name").val());
 var password=$.trim($("#password").val());
 var  cellphone=$.trim($("#cellphone").val());
 var  realname=$.trim($("#realname").val());
 var  identification=$.trim($("#identification").val());
 var location=$.trim($("#location").val());
 var data={
     name:name,
     password:password,
     cellphone:cellphone,
     realname:realname,
     identification:identification,
     location:location
 }
  $.ajax({
      type:'GET',
      url:'/usre/increase',
      data:data,
      dataType:'json ',
      success:function (data) {
     if (data!=null){
       alert("增加成功");
         init();//增加成功  重新加载这个事件
     }else {
        alert("增加失败,请重新输入");
     }
      }

  })
}
function a2(name) {
    var data={
        name:name
    }
  $.ajax({
      type: 'GET',
       url:'/usre/deletename',
       data:data,
     // dataType: 'json',
      success:function (data) {
        if ("删除成功"==data){
            init();
        }else {
            alert("删除失败");
        }
      }
  })
}


    //数据分页
    $(function () {
        init1();
    })
    function init1(pageNumber) {
        //分页的表格
        $('#dataTable1').bootstrapTable('destroy');
        $('#dataTable1').bootstrapTable({
            url:"/home/roomlist",//这个就是请求
            methods:"GET",
            pagination: true,   //启动分页
            dataField:"list",
            striped: true,    //设置为 true 会有隔行变色效果
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sortable: true,    //排序
            sidePagination:'server',//在服务器分页
            // pageList: [1, 2, 4], //记录数可选列表
            pageNumber: pageNumber,
            pageSize: 4,
            // smartDisplay: true,    //程序自动判断显示分页信息
            queryParams:queryParams,
            columns: [
                {
                    title: '房间号码',
                    field: 'commodityid',
                    align:'center',
                },
                {
                    title: '房间类型',
                    field: 'merchandise',
                    align: 'center',
                },
                {
                    title: '房间价格',
                    field: 'price',
                    align: 'center',
                },{
                     title: '房间状态',
                    field: 'person',
                    align: 'center',
                },{
                   title: '房间内容',
                    field: 'house',
                    align: 'center'
                },{
                  title: '删除',
                    align: 'renter',
                    formatter:function (index, row, x) {
                      var html='<button type="button"  onclick="deleteAll( '+row.commodityid+')">删除</button>';
                      return html;
                    }
                }
            ]
        })

    }

    //请求服务数据时所传参数
    function queryParams(params){
        return {
            pageSize : params.limit, //每一页的数据行数，默认是上面设置的10


            pageNum : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
            param : "" //这里是其他的参数，根据自己的需求定义，可以是多个
        }
    }

  function  deleteAll(param){
      //
       $.ajax({
           url:"/zoom/deall",
           type:"POST",
           data:{
               commodityid:param
           },
           // dataType:"json",
           success:function (data) {
                console.log(data);
                if ("删除成功" === data) {
                    init1(1);
                }
           },
           error:function (data) {
             alert("删除失败")
           }
       })
    }
</script>

<script type="text/javascript">
     $(function () {
       Scheduled();
     })
    function Scheduled() {
         $('#dataTable2').bootstrapTable('destroy');
         $('#dataTable2').bootstrapTable({
              url:"/payment/all",
             methods:"GET",
             pagination: false,   //启动分页
             striped: true,    //设置为 true 会有隔行变色效果
             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
             pageSize: 20,//初始页记录数
             sortable: true,    //排序
             pageList: [10,20], //记录数可选列表
             smartDisplay: false,    //程序自动判断显示分页信息
            columns:[
                {
                    title:'订单号',
                    field: 'orderid',
                    align: 'center',
                },
                {
                    title: '房间号',
                    field: 'Ordersfogoods',
                    align: 'center',
                },
                {
                    title: '订单的用户名',
                    field: ' username',
                   align: 'center',
                },
                {
                    title: '订单的价格',
                    field: 'Orderprice',
                    align: 'center'
                 }
                ]
         })
    }

</script>

</body>
</html>
